{extend name="index_layout"/}
{block name="main"}
<div class="layui-card layer-popup">
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">分组</label>
                <div class="layui-input-inline ">
                    <select name="group" lay-verify="required">
                        <option value=""></option>
                        {volist name="groupArray" id="vo"}
                        <option value="{$vo['name']}" >{$vo.title}[{$vo['name']}]</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置类型</label>
                <div class="layui-input-inline ">
                    <select name="type" lay-filter="fieldType" lay-verify="required">
                        <option value=""></option>
                        {volist name="fieldType" id="vo"}
                        <option value="{$vo.name}" data-isoption="{$vo.isoption}" >{$vo.title}[{$vo.name}]</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置标题</label>
                <div class="layui-input-inline ">
                    <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="字段中文标题" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">一般由中文组成，仅用于显示</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置名称</label>
                <div class="layui-input-inline ">
                    <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="字段英文名称" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">英文字母和下划线组成，如 <code>web_site_title</code></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置默认值</label>
                <div class="layui-input-inline">
                    <textarea name="value" placeholder="未指定值时默认插入字段的值" class="layui-textarea"></textarea>
                </div>
                <div class="layui-form-mid layui-word-aux">配置类型为<code>数组</code>时请按如下格式填写：
                    <br>{"键值1":"键名1","键值2":"键名2"}
                </div>
            </div>
            <div class="layui-form-item" id="options" style="display: none;">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置备注</label>
                <div class="layui-input-inline ">
                    <textarea name="remark" placeholder="填写配置说明" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline ">
                    <input type="number" name="sort" autocomplete="off" placeholder="只能是正整数" class="layui-input" value="100">
                </div>
            </div>
            <div class="layui-form-item layer-footer">
                <div>
                    <button class="layui-btn" lay-submit><i class="layui-icon layui-icon-form"></i> {:lang('submit')} </button>
                    <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-delete"></i>  {:lang('reset')}</button>
                </div>
            </div>
        </form>
        <div id="options1" style="display: none;">
            <label class="layui-form-label">配置项</label>
            <div class="layui-input-inline ">
                <textarea name="options" placeholder="键值:键名 键值:键名 键值:键名 ....." class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">如：
                <br>1:北京
                <br>2:上海
                <br>3:广东
            </div>
        </div>
        <div id="options2" style="display: none;">
            <label class="layui-form-label">配置项</label>
            <div class="layui-input-inline ">
                <textarea name="options" placeholder="url:提供数据源的URL地址 field:列表显示读取的字段,默认[name] key:列表选中后渲染的字段,默认[id] pagination:是否开启分页,默认[true] limit:分页大小,默认[10] multiple:是否支持多选,默认[false] max:最多可选择数量 order:排序字段，默认[id]" class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">如：
                <br>1:北京
                <br>2:上海
                <br>3:广东
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    layui.use(['form','yznForm'], function() {
        var form = layui.form,
            yznForm = layui.yznForm;
        var info = '';
        info = {:json_encode($info)};
        form.val("form", info);

        yznForm.listen();
        form.on('select(fieldType)', function(data) {
            if (data.value == 'checkbox' || data.value == 'select' || data.value == 'selects' || data.value == 'radio' || data.value == 'selectpage' || data.value == 'custom') {
                if (data.value == 'selectpage') {
                    $('#options').html($('#options2').html());
                }else if(data.value == 'custom'){
                    $('#options').html($('#options3').html());
                }else{
                    $('#options').html($('#options1').html());
                }
                $('#options').show();
                form.render();
            }else{
                $('#options').hide();
            }
        });
    });
</script>
{/block}